import React, {useMemo, useState} from 'react';

function App(props) {
    /**
     * useMemo：
     *      useMemo 的返回值是接收函数运行以后的结果
     *      useMemo会对接收函数运行以后的结果进行缓存。缓存是由第二个参数决定：如果省略第二个参数，不会缓存
     *      如果将第二个参数设置为[],会将初次返回的值进行缓存
     *      如果将第二个参数设置为[dayArr],会将初次返回的值进行缓存,如果dayArr发生改变，会重新计算并将计算结果进行缓存（类似Vue中的计算属性）
     *      如果将第二个参数设置为[dayArr,num],会将初次返回的值进行缓存,如果 dayArr 或 num 发生改变，会重新计算并将计算结果进行缓存
     * useMemo和 useCallback 的区别：
     *      useMemo缓存的是计算结果，而useCallback缓存的是函数本身。这点可能需要提一下，避免用户混淆。
     *      useCallback 与 useMemo 接收的都是函数。
     *      useCallback 不会运行函数，而useMemo会
     * useMemo和 memo 的区别：
     *      memo 用于缓存组件，避免不必要的渲染，而useMemo是缓存值。两者都是性能优化手段，但应用场景不同。
     **/

    const [dayArr, setDayArr] = useState([
        {
            id: 1,
            do: "吃早餐",
            money: 10
        },
        {
            id: 2,
            do: "扶老太太过马路",
            money: 100
        }, {
            id: 3,
            do: "去工地工作",
            money: 8
        }
    ]);
    const [num, setNum] = useState(0);
    const sumMoney = useMemo(function () {
        console.log("初次挂载就会执行");
        return dayArr.reduce((sum, item) => {
            return sum + item.money;
        }, 0)
        // 数组内的元素发生变化，就会重新计算
    }, [dayArr, num])
    return (
        <div>
            <button onClick={() => setNum(num + 1)}>num ==> {num}</button>
            <button onClick={() => {
                setDayArr([
                    ...dayArr,
                    {
                        id: Date.now(),
                        do: "遛娃",
                        money: 50
                    }
                ])
            }}>增加
            </button>
            <h3>合计：{sumMoney}</h3>
            {
                dayArr.map(item => (
                    <p key={item.id}>{item.do}-->{item.money}</p>
                ))
            }
            <h3>合计：{sumMoney}</h3>
        </div>
    );
}

export default App;